<template>
  <div class="list">
    <loading-comp v-if="isShow"></loading-comp>
    <div class="list-cartoon">
      <ul>
        <li v-for="i in data" :key="i.season_id">
          <router-link :to="`/detail?id=${i.season_id}&isLogin=${isLogin}`">
            <div class="img"><img :src="i.vertical_cover" /></div>
            <p class="list-cartoon-title">{{ i.title }}</p>
            <p class="list-cartoon-intro">已更新至{{ i.last_ord }}话</p>
          </router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { get } from "@/http/request.js";
import LoadingComp from "@/components/LoadingComp.vue";

export default {
  name: "CartoonLists",
  props: ["recommends"],
  data() {
    return {
      data: [],
      isShow: true,
      isLogin: this.$route.query.isLogin,
    };
  },
  components: {
    LoadingComp,
  },

  methods: {
    // 初始化漫画
    async initList() {
      await get(
        `https://apis.netstart.cn/bcomic/ClassPage?areaId=-1&isFinish=-1&order=0&pageNum=1&pageSize=16&isFree=-1&styleId=${this.recommends}`
      ).then((data) => {
        if (data && data.code === 0) {
          this.data = data.data;
        }
      });
      this.isShow = false;
    },
  },
  created() {
    this.initList();
  },
};
</script>

<style lang='scss' scoped>
@import "@/static/common/base.scss";

.list {
  padding: $p;
  background-color: #fff;
  .list-cartoon {
    ul {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;

      li {
        width: 49%;
        overflow: hidden;
        margin: 1vw 0;
        border-radius: 1.3333vw;
        border: 0.2667vw solid $bgc;
        a {
          display: block;
          height: 100%;
          width: 100%;
          .img {
            width: 100%;
            height: 59.4667vw;
            img {
              width: 100%;
              height: 100%;
            }
          }
          p {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            padding: 1vw 2vw;
          }
          .list-cartoon-title {
            font-size: 3.2vw;
            font-weight: 600;
          }
          .list-cartoon-intro {
            font-size: 2.6667vw;
            color: orange;
            background-color: #fff;
            height: 6.6667vw;
          }
        }
      }
    }
  }
}
</style>